import React, {PureComponent} from 'react';
import {DragSource, DropTarget} from "react-dnd";

//拖动项配置
const dragSpec = {
  /**
   * 开始拖拽时触发当前函数
   * @param {*} props 组件的 props
   */
  beginDrag(props) {
    // 返回的对象可以在 monitor.getItem() 中获取到
    return {
      ...props,
      name: props.text,
    }
  },
  /**
   * 拖拽结束时触发当前函数
   * @param {*} props 当前组件的 props
   * @param {*} monitor DragSourceMonitor 对象
   */
  endDrag(props, monitor) {
    // 当前拖拽的 item 组件
    const item = monitor.getItem()
    // 拖拽元素放下时，drop 结果
    const dropResult = monitor.getDropResult()
    // 如果 drop 结果存在，就弹出 alert 提示
    if (dropResult) {
      if (dropResult.type === 'cell') {
        props.moveBox && props.moveBox(item.index, dropResult.index)
      } else if (dropResult.type = 'node') {
        props.dropLine && props.dropLine(item.id, dropResult.id, item.index, dropResult.index)
      }
    }
  },
}

const dragCollect = (connect, monitor) => {
  // 这里返回一个对象，会将对象的属性都赋到组件的 props 中去。这些属性需要自己定义。
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  }
}

//放置项配置
const dropSpec = {
  drop(props, monitor) {
    return {
      ...props,
      name: props.text
    }
  }
}
const dropCollect = (connect) => {
  return {
    connectDropTarget: connect.dropTarget()
  }
}

const nodeStyle = {
  // display: 'relative',
  zIndex: '1',
  boxSizing: 'border-box',
  border: '1px solid #d9d9d9',
  borderRadius: '4px',
  padding: '10px',
  background: '#fff',
  boxShadow: '0 0 5px #888888'
}

class Box extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const {canDrag, connectDragSource, isDragging, id, connectDropTarget, url, text, moveBox, containerWidth, containerHeight, dropLine, ...restProps} = this.props;
    if (canDrag) {
      return (
        connectDragSource(
          connectDropTarget(
            <div style={{...nodeStyle, cursor: 'move'}} {...restProps}
                 id={id}
            >
              {text}
            </div>
          )
        )
      );
    } else {
      return (
        <div style={nodeStyle} {...restProps}
             id={id}
        >
          {text}
        </div>
      )
    }
  }
}


const dragNode = DragSource('li', dragSpec, dragCollect)(Box);

const DropNode = DropTarget('li', dropSpec, dropCollect)(dragNode)

export default DropNode
// export default dragNode
